{% extends "base.html" %}
{% block content %}
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <!-- 标题栏：移除未实现的管理按钮 -->
        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4">
            <h1 class="text-2xl font-bold text-white"><i class="fa fa-trophy"></i> 用户排行榜</h1>
            <p class="text-blue-100 text-sm">按解答题目数排序</p>
        </div>
        
        <!-- 排行榜表格 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">排名</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">用户</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">解答题目数</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for user_obj, ac_count in rank_data %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <!-- 排名 -->
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium
                                {% if loop.index == 1 %}bg-yellow-100 text-yellow-800
                                {% elif loop.index == 2 %}bg-gray-100 text-gray-800
                                {% elif loop.index == 3 %}bg-amber-100 text-amber-800
                                {% else %}bg-blue-50 text-blue-600{% endif %}">
                                {{ loop.index }}
                            </span>
                        </td>
                        
                        <!-- 用户名 + 头像 -->
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <img 
                                    src="{{ user_obj.get_avatar_url(size=32) }}" 
                                    alt="{{ user_obj.username }}的头像"
                                    class="w-8 h-8 rounded-full mr-3 object-cover"
                                >
                                <span class="text-sm font-medium text-gray-900">{{ user_obj.username }}</span>
                            </div>
                        </td>
                        
                        <!-- 解答题目数 -->
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="text-sm text-gray-900">{{ ac_count }} 题</span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}